The authoritative source of information on the structure of HTML documents is the IETF HTML 2.0 specification. This document should be
available at the following URL:
http://www.w3.org/hypertext/WWW/MarkUp/MarkUp.html
The HTML rules used by HoTMetaL also contain some elements and attributes from the HTML 3.0 specification, as well as some elements and attributes that are supported by
the Netscape browser.
This section provides a short summary of the HTML 2.0 elements and the supported extensions. The rules governing the HTML format are quite flexible, and furthermore HoTMetaL will guide you through the
document structure: therefore, the approach followed here will not be to enumerate all the possible combinations of elements.
Rather, an overview of the structure will be presented, together with a
discussion of the different groups of elements (emphasis, links, lists, etc.).
- An element called HTML surrounds the whole
document.
- This element contains two sub-elements, HEAD and BODY.
These elements are required.
- HEAD has
sub-elements that define header material:
-
TITLE: document title. This element is required.
- BASE: can be used to record
the document's URL. The URL recorded here may be used to
resolve a `relative URL' (necessary if the document is not accessed
in its original location).
- ISINDEX: indicates to the
browser that the document is an index document. This is used only if the
document is on a server that does indexing.
- LINK: indicates a relationship
between this document and some other object on the Web.
- META: gives information that
appears in HTTP headers.
- Inside the BODY element, heading elements (H1
through H6) are used to delimit major divisions of the
document (headings are not mandatory, however). Headings are permitted to appear
in any order, but you will obtain the best results when your documents are
displayed in a browser if you follow these guidelines:
- H1 should be used as the highest level of heading,
H2 as the next highest, and so forth.
- You should not skip heading levels: e.g., an H3 should
not appear after an H1, unless there is an
H2 between them.
The major divisions of a document body's structure comprise the following elements:
- ADDRESS: if you want to
include the address of the author of the document, enter it inside this element.
- BLOCKQUOTE: used for
quotes from another source, requiring special block-style formatting.
- DL, DIR,
MENU,
OL, UL: list elements
- P:
paragraphs.
- PRE: pre-formatted text. Use
this element when you want the browser to use the same line breaks and spacing
that you entered. The text will be formatted by a browser using a fixed-width
`typewriter' font.
The following elements are used primarily to add emphasis to inline text:
- B: bold.
- CITE: represents a document
citation.
- EM: browsers usually
represent this element in italic.
- I:
italic.
- STRONG: browsers usually
represent this element in bold.
- TT: characters inside this
element are formatted with a `teletype' font (a fixed-width typewriter font,
such as Courier).
If you want to force a browser to break the current line in the text, insert a BR element (you can do this by clicking on the
toolbar button). You can't type inside this element: it just causes a line break.
To cause the browser to display a horizontal line (rule)
in your document, insert an HR element (you can do this by clicking on the
toolbar button). Individual browsers may display lines of different widths and lengths.
HTML supplies five list elements. With the exception of DL, list elements are composed of one or more LI (list item) elements.
You can nest lists by inserting a UL, OL, etc., inside a list item (LI).
- OL: ordered list. Items in this
list are numbered automatically by the browser. The numbering will reflect
nesting levels.
- UL: unordered list. Items in
this list start with a list mark such as a bullet. Browsers will usually change
the list mark in nested lists.
- DIR: directory list. This is an
unordered list. Each
LI element in this kind of list should be no longer than 24
characters.
- MENU: menu list. This is an
unordered list. Each LI element in this kind of list should be
no longer than one line.
- DL: list of definitions. This is an unordered list. This kind
of list is different from the others. Each `item' in a DL
consists of one or more terms (DT elements), followed by
definitions (DD elements).
Each list type also has a `compact' version, which will be displayed with less whitespace in a browser.
You can choose a menu lists, directory lists, and all compact lists from the
(`Other lists')toolbar button.
It is normal for HTML documents to contain links to other documents, which can be located anywhere on the Web. These links are provided by
URLs (Uniform Resource Locators), which give the location and filename of a document, and the method used to access it.
The following elements represent links to other documents:
-
A: anchor. The HREF attribute of this
element represents a URL. If this attribute has a value, the content
of the element will be highlighted when the document is displayed in a browser
window, and clicking on this content will cause the browser to attempt to open
the file specified by the
URL.
- IMG: image.
This element represents a graphic image. It is
typically used for inline images-you should be aware that some browsers
may not be able to display such images. (In this case, the text, if there is
any, given in the ALT attribute may be shown.) The
SRC attribute represents a URL.
This topic is covered in an example in the tutorial section.
In general, you can set up a `source' and `target' anchor pair by setting the NAME attribute of the target anchor to `string' and setting the URL of the
source anchor to `#string'. This sets up a one-way link. You can set up a two-way link by editing the two anchors so that each one's NAME attribute corresponds to the
other's URL. See the section Links to a specific location in the
URLs chapter for more information.
A `hot image' is used like an anchor-when you click on the image, the browser performs an action.
This is very easy to accomplish: you just need to insert an IMG element inside an A element. Both elements will have a URL: the IMG's
URL locates the image, and the A's
URL locates the file that is retrieved when you click on the image.
Sometimes you will see images that have several `hot spots' that you can click on and cause URLs to be accessed. This is done using a image map file, which tells the browser
where the hot spots are. To prepare such a file, you'll need other tools besides HoTMetaL; see the section
Image maps in the Working with images chapter for more information. You can also retrieve the document `Overview on using Clickable Image Maps'
by opening the file
faq.html, located in the HoTMetaL installation
directory, with a browser and clicking on
the appropriate anchor.
The following elements are used to construct forms that the user can fill in and submit over the Web. When your document is browsed, the browser will generate the appropriate graphical objects.
- FORM: the top-level element
for a form. It surrounds all of the other form elements.
- INPUT: generates a text entry box, push
button, radio button, or
check button.
- SELECT: represents a group
of choices that a user can make. Generates
an option menu or scrollable list.
- OPTION: one choice in a
SELECT group.
- TEXTAREA: generates a
field that allows the user to enter several lines of text.
For more information on forms, see the tutorial on forms. You can also retrieve the document `Information on setting up form functionality' by opening the file
faq.html, located in the
HoTMetaL installation folder, with a browser and clicking on the appropriate anchor.
The elements in this section would normally be used in technical manuals or papers.
- CODE: code samples.
- KBD: used to display text that
a user would enter at the keyboard. (Do not confuse this with
INPUT, used in forms.)
- SAMP: literal characters.
- VAR: represents a variable
name.
HoTMetaL lets you use the Netscape extensions to HTML 2.0 (for example, the FONT element) and some HTML 3.0 elements. These are available from the markup
commands (Insert Element... and Change..., Edit SGML Attributes...) or from the
(`Extensions to HTML 2.0') toolbar
button.
It is important to realize that these extensions are non-standard, are not supported by all browsers (many are supported only by Netscape), and could change at any time. You should also consult the Netscape extensions documentation (see the Netscape home page, http://www.mcom.com) and the HTML 3.0 documentation (see the
W3O home page, http://www.w3.org).
The following list describes some common extensions (at the time of this writing). Any attributes that are described should be edited with the Edit SGML Attributes... command. That is, put the insertion point inside the element in question and then choose this command-see also Attributes for more information on attributes.
- Background color: this is controlled by the
BGCOLOR attribute of the BODY element. The
value of this attribute must be a color in hexadecimal red-green-blue format,
e.g., `#ad65b7'.
- Background image: this is controlled by the
BACKGROUND attribute of the
BODY element. The value of this attribute must be a filename that
specifies the image; this filename can be expressed as a complete URL
if necessary. Note that you can't use Edit URL... to edit
this attribute.
- Text and link colors: the TEXT,
LINK, ALINK, and
VLINK attributes of BODY control the colors
of text, links, active links (links currently being clicked on), and visited
links (links that have already been clicked on), respectively. The values must
be colors in hexadecimal red-green-blue format.
- Blinking text: surround text with the BLINK
element to cause it to blink on and off in the browser.
- Centered text: surround text with the CENTER
element to cause it to be centered in the browser. Some elements also have an
ALIGN attribute that can be set to the value `CENTER'.
This will work in some browsers that don't support the CENTER
element.
- Preventing
line breaks: surrounding text with the NOBR element prevent
the browser from inserting line breaks. This element should be used only with
short pieces of text (i.e., a few words).
- Changing the font size: you
can change the font size for a piece of text by surrounding it with the FONT
element and then setting its SIZE attribute to the desired
font (point) size. SIZE can also have a relative
(+/-) value that causes the browser to add or subtract the specified value from
the current font size.
- Image
alignment: Netscape has added a number of possible values for the ALIGN
attribute of the IMG element. Only the standard HTML 2.0
values `Bottom', `Middle', and `Top' are available via the
Edit Image
dialog box. Use Edit SGML Attributes...
if you want to choose another value.
- Paragraph alignment: this feature is available via
the ALIGN attribute of the
P element.
- The META element: if you wish
to specify a URL for this element, you can do so by editing the
URL attribute with Edit SGML Attributes....
HTML tables are also supported: see the chapter Tables.